/*
 * @Author: fanjs
 * @Date: 2025-02-23 17:41:16
 * @Description:
 */
import { Tabs, Tab } from "@heroui/react";
import { useState } from "react";
import LoginComponent from "./components/Login";
import RegisterComponent from "./components/Register";
import { ThemeSwitcher } from '@/components/SwitchTheme'

const inputClassNames = {
  label: "!text-default-600/80",
  input: "bg-transparent",
  innerWrapper: "bg-transparent",
  inputWrapper: [
    "bg-default-200/50",
    "dark:bg-default/60",
    "backdrop-blur-xl",
    "backdrop-saturate-200",
    "hover:!bg-default-200/50",
    "group-data-[focus=true]:bg-default-200/50",
    "dark:hover:!bg-default/60",
    "dark:group-data-[focus=true]:bg-default/60",
    "!cursor-text",
  ],
}

const LoginPage: React.FC = () => {
  const [selected, setSelected] = useState<React.Key>("login");

  return (
    <div className="font-sans antialiased">
      <div className="h-screen flex-center flex-col pt-6 -mt-20 text-default-foreground">
        <h2 className="font-bold text-3xl relative">
          Taste - <span className="bg-secondary text-white px-2 pb-1 rounded-md">Life</span>
          <div className="absolute top-0 -right-11">
            <ThemeSwitcher isIcon={true}></ThemeSwitcher>
          </div>

        </h2>

        {/* bg-slate-50 shadow-sl dark:bg-slate-900 */}
        <div className="w-[90%] sm:max-w-md mt-6 px-4 py-4 bg-slate-50 dark:bg-content1 shadow-sl overflow-hidden rounded-lg">
          <Tabs
            variant="underlined"
            fullWidth
            color="secondary"
            selectedKey={selected as string}
            size="md"
            onSelectionChange={setSelected}
            classNames={{
              panel: 'min-h-[280px]',
            }}
          >
            <Tab key="login" title="LOGIN">
              <LoginComponent CustomStyle={inputClassNames} />
            </Tab>
            <Tab key="register" title="REGISTER">
              <RegisterComponent CustomStyle={inputClassNames} />
            </Tab>
          </Tabs>
        </div>

        {/* 网站底部备案信息 */}
        <footer className="fixed bottom-4 text-xs text-default-500">
          <div className="footer-content">
            <a
              href="https://beian.miit.gov.cn"
              target="_blank"
              rel="noopener noreferrer"
              className="footer-link"
            >
              冀ICP备2025112760号
            </a>
          </div>
        </footer>
      </div >
    </div >
  )
}

export default LoginPage
